<template>
  <div class="portal-page">
    <div class="header-wrap">
      <div class="logo-img" @click="goDomainManage"></div>
      <div class="header-r" :style="{'padding-right': isAuthorization? '20px' : ''}">
        <Button type="text" @click="goDocumentCenter">文档中心</Button>
        
        <div class="user-dropdown-menu-con" v-if="isAuthorization">
         <Dropdown trigger="click" @on-click="handleClickUserDropdown" :transfer="true">
              <div style="display: flex; align-items: center;">
                <img v-if="user.avatar" class="user-avatar" :src="user.avatar" alt="">
                <Icon v-else type="md-person" />
                <a href="javascript:void(0)" :style="{'height': '50px','line-height': '50px'}">
                  <span class="main-user-name" style="display: inline-block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width:100px;" :title="user.userName">{{ user.userName }}</span>
                  <Icon type="arrow-down-b"></Icon>
                </a>
              </div>
              <DropdownMenu slot="list">
                <DropdownItem name="resetPassword"> {{ $t("i.resetPassword.changePassword") }}</DropdownItem>
                <DropdownItem name="loginout">{{ $t("i.main.logout") }}</DropdownItem>
              </DropdownMenu>
          </Dropdown>
        </div>
        
        <Button type="primary" class="login-btn" @click="goToLogin" v-else>登录</Button>
      </div>
    </div>
    <div class="banner-wrap">
        <div class="banner-title">
          数字化统一开发平台
          <div class="tips">
            打造统一的专业代码与低代码开发管理平台，让应用开发更简单高效！
          </div>
        </div>
    </div>
    <div class="portal-container">
      <div class="notice">
        <div class="notice-icon">
          <img src="../asset/images/notice.png" width="16" height="16" alt="notice">
        </div>
        <div class="notice-content-wrap">
          <div class="notice-content" :style="{animationDuration: marqueeStrs.length * 0.2 + 5 + 's' }">{{ marqueeStrs }}</div>
        </div>
      </div>
      <div class="functional-block">
        <div class="fn-item">
          <div class="item-title">申请试用</div>
          <div class="item-tips">免费30天开发账户，体验应用快速构建！</div>
          <div class="operate">
            <Button type="primary">立即申请</Button>
            <Button type="primary">了解更多</Button>
          </div>
          <div class="item-img">
            <img class="item-img-1" src="../asset/images/applyForTrial-1.png" width="310" height="219" alt="">
            <img class="item-img-2" src="../asset/images/applyForTrial-2.png" width="310" height="219" alt="">
          </div>
        </div>
        <div class="fn-item">
          <div class="item-title">快速入门</div>
          <div class="item-tips">快速了解应用开发流程与平台能力</div>
          <div class="operate">
            <Button type="primary">应用开发</Button>
            <Button type="primary">平台概览</Button>
          </div>
          <div class="item-img">
            <img class="item-img-1" src="../asset/images/quickStart-1.png" width="310" height="219" alt="">
            <img class="item-img-2" src="../asset/images/quickStart-2.png" width="310" height="219" alt="">
          </div>
        </div>
        <div class="fn-item">
          <div class="item-title">服务与支持</div>
          <div class="item-tips">点击了解我们的更多</div>
          <div class="operate">
            <Button type="primary">基础服务</Button>
            <Button type="primary">增值服务</Button>
          </div>
          <div class="item-img">
            <img class="item-img-1" src="../asset/images/service-support-1.png" width="310" height="219" alt="">
            <img class="item-img-2" src="../asset/images/service-support-2.png" width="310" height="219" alt="">
          </div>
        </div>
      </div>
      <div class="advantage">
        <div class="title">选择我们的理由？</div>
        <div class="advantage-wrap">
          <div class="advantage-item">
            <div class="item-icon icon-1"></div>
            <div class="item-title">能力特性</div>
          </div>
          <div class="advantage-item mlr-24">
            <div class="item-icon icon-2"></div>
            <div class="item-title">功能全景</div>
          </div>
          <div class="advantage-item">
            <div class="item-icon icon-3"></div>
            <div class="item-title">应用案例</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import { CoreModuleName } from "@/const";
import { ResetPassword } from '@ripples/platform-components'
export default {
  data() {
    return {
      user: {},
      isAuthorization: '',
      marqueeStrs: '这里是公告轮博信息~~这里是公告轮博信息这里是公告轮博信息~~这里是公告轮博信息这里是公告轮博信息~~这里是公告轮博信息!!!!!'
    };
  },
  created () {
    // this.getNoticeList()
    this.isAuthorization = localStorage.getItem('Authorization') || ''
    const { userInfo } = $store.state[CoreModuleName];
    
    if (this.isAuthorization) {
      if ( userInfo.userName) {
        this.user = userInfo
      } else {
        window.$util.GetLoginData().then(res => {
          if (!res) {
            return;
          }
          if (res.userBasicVo) {
            this.setUserInfo(res.userBasicVo);
            this.user = res.userBasicVo
          }
        })
      }
      
    }
  },
  mounted () {
    this.getNoticeList()
  },
  methods: {
    ...mapMutations($moduleName, [
      "setUserInfo"
    ]),
    goToLogin() {
      const redirectUrl = window.location.origin + "/#/" + window.RPConfig.redirectURL;
      window.location.href = `${window.RPConfig.loginUrl}?redirect_uri=${encodeURIComponent(redirectUrl)}`;
    },
    goDomainManage () {
      if (this.isAuthorization) {
        this.$router.push({ path: "/domain-manage/home" });
      }
    },
    goDocumentCenter() {
      const docUrl = window?.RPConfig?.docUrl || 'http://docs-new.dadp-sit.crcloud.com/'
      window.open(docUrl)
    },
    handleClickUserDropdown(name) {
      switch (name) {
        case "loginout":
          window.$util.redirectToLogin();
          break;
        case "resetPassword":
          this.resetPassword();
          break;
      }
    },
    resetPassword() {
      new this.$pageModal(
        ResetPassword,
        {
          props: {}
        },
        data => {}
      );
    },
    getNoticeList() {
      window.$http.post('apis/setting/valueset/items', {vsCode: 'notice'}).then(res => {
        const list = []
        res.data.forEach(element => {
          list.push({
            label: element.vsiValue,
            value: element.vsiKey,
            vsiDescription: element.vsiDescription
          })
        });
        this.marqueeStrs = list[0] ? list[0].vsiDescription : ''
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>
<style lang="less" scoped>
.portal-page{
  height: 100%;
  background: #F5F9FE;
  overflow: auto;
  .user-avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 4px;
  }
  &::-webkit-scrollbar{
    width: 4px;
  }
  &::-webkit-scrollbar-thumb{
    border-radius: 3px;
    background: #eee;
  }
  .header-wrap{
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    padding-left: 24px;
    background: #FFFFFF;
    box-shadow: 0px 2px 26px 0px rgba(229,233,238,0.69);
    .logo-img {
      width: 226px;
      display: inline-block;
      height: 30px;
      background: url(../asset/images/portal-logo.png) no-repeat center center;
      background-size: 100%;
    }
    .header-r{
      height: 100%;
      display: flex;
      align-items: center;
      .ivu-btn {
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #12151B;
        letter-spacing: 0;
        font-weight: 500;
        &:focus {
          box-shadow: none;
        }
      }
      
      .login-btn{
        width: 180px;
        height: 100%;
        background: #FF7B0F;
        border-radius: 3px;
        border: none;
        font-family: PingFangSC-Medium;
        color: rgba(255,255,255,0.90);
        font-weight: 500;
      }
    }
  }
  .banner-wrap{
    height: 684px;
    width: 100%;
    padding-top: 1px;
    background-color:#FFFFFF;
    background-image: url(../asset/images/banner.png);
    background-position: 50%;
    background-size: cover;
    .banner-title{
      font-family: PingFangSC-Semibold;
      font-size: 70px;
      color: #12151B;
      letter-spacing: 0;
      text-align: center;
      font-weight: 600;
      margin: 84px auto 0;
      .tips{
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #111A34;
        letter-spacing: 0;
        margin-top: 26px;
        opacity: 0.5;
        text-align: center;
        font-weight: 400;
      }
    }
  }
  .portal-container {
    position: relative;
    top: -124px;
    width: 1280px;
    margin: 0 auto;
    .notice{
      // position: relative;
      display: flex;
      height: 42px;
      width: 500px;
      align-items: center;
      padding-left: 20px;
      background: rgba(255,255,255,0.52);
      border-radius: 4px;
      margin-bottom: 26px;
      overflow: hidden;
      backdrop-filter: saturate(150%) blur(8px);
      .notice-icon{
        font-size: 0;
        margin-right: 16px;
      }
      .notice-content-wrap {
        position: relative;
        flex: 1;
        overflow: hidden;
        height: 100%;
      }
      .notice-content {
        position: absolute;
        top: 50%;
        height: 22px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #EC4547;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        white-space: nowrap;
        margin-top: -11px;
        animation: marquee 5s linear infinite; /* 跑马灯动画 */
      }
    }
    @keyframes marquee {
      0% {
        left: 100%;
      }
      100% {
        left: 0%;
        transform: translateX(-100%);
      }
    }
    .functional-block{
      display: flex;
      background: #FFFFFF;
      box-shadow: 0px 0px 8px 0px rgba(225,230,241,1);
      border-radius: 4px;
      margin-bottom: 60px;
      .fn-item{
        height: 550px;
        flex: 1;
        padding-top: 50px;
        text-align: center;
        background-color: #fff;
        &:hover{
          background-image: url(../asset/images/portal-item-bg.png);
          background-position: 50%;
          background-size: cover;
          .operate{
            .ivu-btn{
              &:first-child{
                color: #FFFFFF;
                background: #304777;
              }
            }
          }
          .item-img{
            .item-img-2 {
              display: inline-block;
            }
            .item-img-1 {
              display: none;
            }
          }
        }
        .item-title{
          font-family: PingFangSC-Semibold;
          font-size: 26px;
          color: #12151B;
          letter-spacing: 0;
          font-weight: 600;
          margin-bottom: 20px;
        }
        .item-tips{
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #858B9C;
          letter-spacing: 0;
          font-weight: 400;
          margin-bottom: 24px;
        }
        .operate{
          margin-bottom: 60px;
          .ivu-btn{
            font-family: PingFangSC-Medium;
            width: 140px;
            height: 48px;
            font-size: 18px;
            color: #304777;
            letter-spacing: 0;
            text-align: center;
            font-weight: 500;
            border: 1px solid rgba(236,236,245,1);
            background: rgba(255,255,255,0.30);
            backdrop-filter: saturate(150%) blur(8px);
            border-radius: 2px;
            &:first-child{
              background: #ECECF5;
              margin-right: 10px;
              border: none;
              backdrop-filter: none;
            }
          }
        }
        .item-img{
          .item-img-2 {
            display: none;
          }
        }
      }
    }
    .advantage{
      .title{
        font-family: PingFangSC-Semibold;
        font-size: 32px;
        color: #111A34;
        letter-spacing: 0;
        text-align: center;
        font-weight: 600;
        margin-bottom: 63px;
      }
      .advantage-wrap{
        display: flex;
        .advantage-item{
          display: flex;
          height: 160px;
          flex: 1;
          padding-left: 92px;
          background-color: #fff;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.2s;
          &:hover{
            transform: translate(0, -10px);
            box-shadow: 0px 0px 8px 0px rgba(225,230,241,1);
          }
          &.mlr-24{
            margin: 0 24px;
          }
          .item-icon{
            position: relative;
            top: 50%;
            transform: translate(0,-50%);
            width: 85px;
            height: 105px;
            margin-right: 20px;
            background-image: url(../asset/images/portal-reason-1.png);
            background-position: 50%;
            background-size: cover;
            &.icon-2{
              width: 105px;
              height: 106px;
              background-image: url(../asset/images/portal-reason-2.png);
            }
            &.icon-3{
              width: 100px;
              height: 105px;
              background-image: url(../asset/images/portal-reason-3.png);
            }
          }
          .item-title{
            font-family: PingFangSC-Semibold;
            font-size: 24px;
            line-height: 24px;
            color: #12151B;
            letter-spacing: 0;
            text-align: center;
            font-weight: 600;
            margin-top: 80px;
          }
        }
      }
    }
  }
}
</style>